<template>
  <div>
    <div id="YGongXuEcharts" style="height: 100%" :style="{ height: contentHeigth }"></div>
  </div>
</template>

<script setup>
  import * as echarts from 'echarts'
  import { defineProps, onMounted, nextTick, defineEmits } from 'vue'

  const props = defineProps({
    contentHeigth: { type: String }
  })

  // const VALUE = ref([65, 64, 62, 45, 55])
  const xData = ref(['细纱', '络筒'])
  const emit = defineEmits(['zhuZhuangTuClick'])

  const handleSetVisitChart = () => {
    let myChart = echarts.init(document.getElementById('YGongXuEcharts'))

    myChart.on('click', function (params) {
      emit('zhuZhuangTuClick', params)
    })
    let option = {
      // backgroundColor: "#b7babb",
      title: {
        text: '各工序设备状态分析图',
        subtext: '',
        x: '2%',
        textStyle: {
          color: '#f3efef',
          fontSize: '14'
        },
        subtextStyle: {
          color: '#90979c',
          fontSize: '14'
        }
      },

      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
          textStyle: {
            color: '#fff'
          }
        }
      },
      grid: {
        borderWidth: 0,
        top: 90,
        left: '15%',
        bottom: 40,
        textStyle: {
          color: '#fff'
        }
      },
      legend: {
        top: '10%',
        right: '2%',
        textStyle: {
          color: '#ebeff3'
        },
        data: ['运行', '停车', '故障', '离线']
      },

      calculable: true,
      yAxis: [
        {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#90979c'
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitArea: {
            show: false
          },
          axisLabel: {
            interval: 0
          },
          data: xData.value
        }
      ],
      xAxis: [
        {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#90979c'
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitArea: {
            show: false
          },
          axisLabel: {
            interval: 0
          }
        }
      ],
      series: [
        //   {
        //   "name": "运行",
        //   "type": "bar",
        //   "stack": "总量",
        //   "barMaxWidth": 35,
        //   "barGap": "10%",
        //   "itemStyle": {
        //     "normal": {
        //       "color": "rgba(255,185,15,1)",
        //       "label": {
        //         "show": true,
        //         "textStyle": {
        //           "color": "#fff"
        //         },
        //         "position": "insideTop",
        //         formatter: function(p) {
        //           return p.value > 0 ? (p.value) : '';
        //         }
        //       }
        //     }
        //   },
        //   "data": [],
        // },
        {
          name: '运行',
          type: 'bar',
          stack: '总量',
          // "barMaxWidth": 35,
          barWidth: 50, // 柱图宽度
          barGap: '10%',
          itemStyle: {
            normal: {
              color: 'rgb(88,217,51)',
              label: {
                // "show": true,
                textStyle: {
                  color: '#fff'
                },
                position: 'insideRight',
                formatter: function (p) {
                  return p.value > 0 ? p.value : ''
                }
              }
            }
          },
          data: [134, 22]
        },
        {
          name: '故障',
          type: 'bar',
          stack: '总量',
          barWidth: 50, // 柱图宽度
          barGap: '10%',
          itemStyle: {
            normal: {
              color: 'rgb(236,114,20)',
              label: {
                // "show": true,
                textStyle: {
                  color: '#fff'
                },
                position: 'insideRight',
                formatter: function (p) {
                  return p.value > 0 ? p.value : ''
                }
              }
            }
          },
          data: [2, 3, 2, 2]
        },
        {
          name: '停车',
          type: 'bar',
          stack: '总量',
          barWidth: 50, // 柱图宽度
          itemStyle: {
            normal: {
              color: 'rgb(248,6,6)',
              label: {
                // "show": true,
                textStyle: {
                  color: '#fff'
                },
                position: 'insideRight',
                formatter: function (p) {
                  return p.value > 0 ? p.value : ''
                }
              }
            }
          },
          data: [2, 1, 1, 1]
        },
        {
          name: '离线',
          type: 'bar',
          stack: '总量',
          barWidth: 50, // 柱图宽度
          itemStyle: {
            normal: {
              color: 'rgb(75,75,78)',
              label: {
                // "show": true,
                textStyle: {
                  color: '#fff'
                },
                position: 'insideRight',
                formatter: function (p) {
                  return p.value > 0 ? p.value : ''
                }
              }
            }
          },
          data: [2, 1, 1, 1]
        }
      ]
    }
    myChart.setOption(option)
    window.addEventListener('resize', function () {
      myChart.resize()
    })
  }

  onMounted(() => {
    nextTick(() => {
      handleSetVisitChart()
    })
  })
</script>

<style scoped></style>
